<template>
  <div class="todoBody">
    <div class="title">todos</div>
    <div>
      <EditTodo
        v-model="newTodo"
        autofocus
        placeholder="新增今日待办"
        autocomplete="off"
        @keyup.enter="addTodo"
      ></EditTodo>
      <ul>
        <todoItem
          v-for="item in filterTodos"
          :key="item.id"
          :item="item"
          v-model:editedTodo="editedTodo"
          @removeTodo="removeTodo"
        ></todoItem>
      </ul>

      <filterTodo
        :filterList="filterList"
        v-model:visibility="visibility"
      ></filterTodo>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs} from "vue";
import todoItem from "./todoItem.vue";
import filterTodo from "./filterTodo.vue";
import { useTodos } from "./useTodos.js";
import { usefilterTodo } from "./useFilterTodos.js";

export default {
  components: {
    todoItem,
    filterTodo,
  },
  setup() {
    // 操作todo
    const userTodos = reactive({
      // 新增绑定值
      newTodo: "",
      // 当前正在编辑的todo
      editedTodo: null,
    });
    // 从公共方法导出数据
    const { todos, addTodo, removeTodo } = useTodos(userTodos);
    // 过滤操作
    const filterState = usefilterTodo(todos);

    return {
      ...toRefs(userTodos),
      ...toRefs(filterState),
      addTodo,
      removeTodo,
    };
  },
};
</script>

<style scoped>
.title {
  font-size: 45px;
  color: rgba(9, 150, 226, 0.7);
}

.todoBody {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(204, 204, 204);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
input {
  outline: medium;
}
</style>